<template>
  <el-container>
    <el-header :height="'auto'">
      <el-row type="flex" justify="center">
        <el-col :span="24">
          <el-form :inline="true" :model="formInline">
            <el-form-item size="small" label="审批人">
              <el-input v-model="formInline.user" placeholder="审批人" />
            </el-form-item>
            <el-form-item size="small" label="活动区域">
              <el-select v-model="formInline.region" placeholder="活动区域">
                <el-option label="区域一" value="shanghai" />
                <el-option label="区域二" value="beijing" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input v-model="formInline.keywords" size="small" placeholder="请输入内容" class="input-with-select">
                <el-select slot="prepend" v-model="formInline.type" placeholder="请选择" style="width: 130px;">
                  <el-option label="餐厅名" value="1" />
                  <el-option label="订单号" value="2" />
                  <el-option label="用户电话" value="3" />
                </el-select>
                <el-button slot="append" icon="el-icon-search" @click="onSubmit">搜索</el-button>
              </el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-table
        :data="tableData.data"
        style="width: 100%"
      >
        <el-table-column
          prop="date"
          label="日期"
        />
        <el-table-column
          prop="name"
          label="姓名"
        />
        <el-table-column
          prop="address"
          label="地址"
        />
        <el-table-column
          label="操作"
        >
          <router-link to="/test/form">
            <el-button size="small" type="primary" plain>编辑</el-button>
          </router-link>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <div class="block">
        <el-pagination
          background
          :hide-on-single-page="true"
          :current-page="tableData.current_page"
          :page-size="tableData.list_rows"
          layout="total, prev, pager, next, jumper"
          :total="tableData.total"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  name: 'List',
  data() {
    return {
      formInline: {
        user: '',
        type: '',
        keywords: '',
        region: ''
      },
      tableData: {
        current_page: 1,
        list_rows: 10,
        total: 100,
        data: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  },
  methods: {
    handleCurrentChange(page) {
      this.tableData.current_page = page
      this.onSubmit()
    },
    onSubmit() {
      console.log('submit!')
    }
  }
}
</script>

<style lang="scss" scoped>
    .dashboard {
        &-container {
            margin: 30px;
        }

        &-text {
            font-size: 30px;
            line-height: 46px;
        }
    }
</style>
